import React, {useEffect, useState} from 'react'
import {Button, Tag} from 'antd'

import {history, connect} from 'umi'

import styles from './index.less'
// import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import {driverList} from '@/service/marketing/commodity'
// import {auditStatus} from '../../../dict'

// const formItemLayout = {
// 	labelCol: {flex: '110px'},
// 	wrapperCol: {flex: '1'},
// }

const driverRelationList = (props: any) => {
	const {rentSchemeId} = props
	// const [formData, setFormData] = useState<any[]>([])
	// const [searchData, setSearchData] = useState()

	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const [total, setTotal] = useState(0)
	const [loading, setLoading] = useState(false)
	const [list, setList] = useState<any[]>([])

	const columns: any = [
		{
			title: '序号',
			dataIndex: 'order',
			align: 'center',
			width: 70,
			render(text: any, record: any, index: any) {
				return <span>{index + 1}</span>
			},
		},
		{
			title: '活动编码',
			dataIndex: 'activityCode',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '活动名称',
			dataIndex: 'activityName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '有效时间',
			dataIndex: 'beginTime',
			align: 'center',
			width: 250,
			ellipsis: true,
			render: (text: any, record: any) => (
				<span>
					{record?.beginTime || '--'}-{record?.endTime || '--'}
				</span>
			),
		},
		{
			title: '状态',
			dataIndex: 'auditStatus',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <Tag color="processing">{text || '--'}</Tag>,
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 150,
			render: (text: any, record: any) => (
				<div>
					<Button
						type="link"
						size="small"
						onClick={() => {
							history.push({
								pathname:
									'/merchantCenter/driverRewardRules/detail',
								query: {
									pageType: 'detail',
									id: record?.awardCode,
								},
							})
						}}>
						详情
					</Button>
				</div>
			),
		},
	]

	// 获取表格数据
	const onListFun = () => {
		setLoading(true)
		driverList({
			...params,
			rentSchemeId,
		})
			.then((res: any) => {
				if (res?.success) {
					setList(() => res?.data?.records)
					setTotal(() => res?.data?.total)
				}
				setLoading(false)
			})
			.catch(() => {
				setLoading(false)
			})
	}
	// 初始化分页
	useEffect(() => {
		onListFun()
	}, [params])

	// 搜索
	// const onFinish = (values: any) => {
	// 	setSearchData(() => values)
	// }

	// 搜索重置
	// const onReset = () => {
	// 	setSearchData(()=>{})
	// }
	// useEffect(() => {
	// 	const formItems: any[] = [
	// 		{
	// 			type: 'group',
	// 			key: 'group1',
	// 			groupItems: [
	// 				{
	// 					type: 'input',
	// 					label: '活动编码',
	// 					name: 'activityCode',
	// 					key: 'activityCode',
	// 				},
	// 				{
	// 					type: 'input',
	// 					label: '活动名称',
	// 					name: 'activityName',
	// 					key: 'activityName',
	// 				},
	// 				{},
	// 			],
	// 		},
	// 	]
	// 	setFormData(formItems)
	// }, [])

	return (
		<div className={styles.page}>
			{/* <div className="search">
				{formData && (
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formData}
						formLayout={formItemLayout}
					/>
				)}
			</div> */}
			<div className="table">
				<CustomTable
					params={params}
					columns={columns}
					pagination
					total={total}
					scroll={{y: 350}}
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					kid="id"
					loading={loading}
					dataSource={list}
				/>
			</div>
		</div>
	)
}
export default connect(({user}: any) => ({
	user,
}))(driverRelationList)
